<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入好人替换元素操作：针对元素增删改操作 
		append()          功能：在匹配元素集合中所有元素的内部末尾插入内容
		prepend()         功能：在匹配元素集合中所有元素的内部开头插入内容
		
		after()           功能：在匹配元素集合中所有元素的外部后面插入内容
		before()          功能：在匹配元素集合中所有元素的外部前面插入内容
		
		remove()          功能：移除匹配元素集合中所有的元素和子元素【盒子模型都删掉】
		empty()           功能：清空匹配元素集合中所有的元素的内容【盒子模型不删】
		
		replaceWith()
		-->
		<style>
			button{
				padding: 10px 15px;
				margin: 5px;
				cursor: pointer;
				background: #aaaa00;
				border-radius: 5px;
			}
			body{
				margin: 20px;
			}
			div#target{
				border: 1px solid;
				padding: 10px;
				margin-left: 5px;
				margin-top: 10px;
				border-radius: 5px;
			}
			.box{
				display: block;
				background-image:url(../img/5.png);
				width: 300px;
				height: 300px;
				border: 5px solid #f00;
				border-radius: 50%;
				color: transparent;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button id="appendBtn">内部末尾插入元素</button>
		<button id="prependBtn">内部开头插入元素</button>
		<button id="afterBtn">外部后面插入元素</button>
		<button id="beforeBtn">外部前面插入元素</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceBtn">替换元素</button>
		<!-- 目标显示区域 -->
		<div id="target"><p>目标元素的初始段落</p></div>
		<!-- 用于插入跟替换的区域 -->
		<div id="newElement" style="display: none;"><p>插入新元素的初始段落</p></div>
	 <script>
	 	/* 1.点击 内部末尾插入元素 按钮 p文本后面追加新元素中包含内容操作 */
		$('#appendBtn').click(function(){
			//效果：点击按钮 追加新元素--自带内容
			//1.1追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
			var cpe=$('#newElement').clone();
			//clone() 创建一个元素的副本，副本包含：内部元素以及所有的属性和属性值
			//1.2自带属性和属性值：隐藏---改成显示
			cpe.css("display","block");
			//1.3将复制出来的新元素，追加给当前元素上
			$('#target').append(cpe);
		});
		/* 2.点击 内部开头插入元素 按钮 p文本后面追加新元素中包含内容操作 */
		$('#prependBtn').click(function(){
			var cpe=$('#newElement').clone();
			cpe.css("display","block");
			$('#target').prepend(cpe);
		});
		/* 3.点击 外部后面插入元素 按钮 p文本后面追加新元素中包含内容操作 */
		$('#afterBtn').click(function(){
			var cpe=$('#newElement').clone();
			cpe.addClass('box');
			$('#target').after(cpe);
		});
		/* 4.点击 外部前面插入元素 按钮 p文本前面追加新元素中包含内容操作 */
		$('#beforeBtn').click(function(){
			var cpe=$('#newElement').clone();
			cpe.css({"display":"block",
			"background-image":"url(../img/5.png)",
			"width":"300px",
			"height":"300px",
			"border":"5px solid #f00",
			"border-radius":"50%",
			"color":"transparent"
			});
			$('#target').before(cpe);
		});
		/* 5.点击 删除元素  按钮  页面上所有元素包括子元素全部删除【盒子模型删】 */
		$('#removeBtn').click(function(){
			$('#target').remove();
		});
		/* 6.点击 清空元素  按钮  页面上所有元素当中内容全部删除【盒子模型不删】 */
		$('#emptyBtn').click(function(){
			$('#target').empty();
		});
		/* 7.点击 替换元素 按钮 页面上目标元素替换为新元素 */
		$('#replaceBtn').click(function(){
			//克隆   新亚u盛怒  #newElement【父子级】
			var cpe=$('#newElement').clone();
			cpe.css("display","block");
			//替换 找到 目标元素 替换 新元素
			$('#target').replaceWith(cpe);
		});
	 </script>
	</body>
</html>